<template>
  <div class="tinymce-box">
    <editor
      v-model="content"
      :init="tinymceInit"
      :disabled="disabled"
      @click="onClick">
    </editor>
  </div>
</template>

<script>
// 文档 http://tinymce.ax-z.cn/
// 引入组件
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'

// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons' //解决了icons.js 报错Unexpected token '<'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import './import-all'

export default {
  components: {
    Editor
  },
  name: 'TinymceEditor',
  props: {
    // 默认的富文本内容
    defaultContent: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 500,
    },
    width: {
      type: Number,
      default: undefined,
    },
    upload_url: {
      type: String,
      default: '',
    },
    showMenubar: {
      type: Boolean,
      default: true,
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: window.location.origin ? window.location.origin : ''
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: `print fullpage searchreplace autolink directionality visualblocks
        visualchars template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime
        wordcount textpattern help advlist table lists paste preview fullscreen image imagetools code link`,
    },
    toolbar: {
      type: [String, Array],
      default: ` undo redo
      | formatselect
      | bold italic strikethrough forecolor backcolor formatpainter
      | link image | alignleft aligncenter alignright alignjustify
      | numlist bullist outdent indent
      | removeformat
      | preview fullscreen code`,
    }
  },
  data () {
    return {
      tinymceFlag: 1,
      tinymceInit: {},
      content: '',
    }
  },
  created () {
    const _this = this
    this.tinymceInit = {
      language: 'zh_CN',
      language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
      skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
      // skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系
      // content_css（为编辑区指定css文件
      content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
      // （指定需加载的插件）
      plugins: this.plugins,
      toolbar: this.toolbar, // （自定义工具栏）
      height: this.height,
      width: this.width,
      browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      elementpath: false, // 禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      // menubar: this.showMenubar, // 隐藏最上方menu
      // 此处为图片上传处理函数
      images_upload_handler:(blobInfo, success, failure)=>{
        const file = new File([blobInfo.blob()],blobInfo.filename(),{type:'image/*'})
        // const img = 'data:image/jpeg;base64,' + blobInfo.base64()

        _this.$axios({
          method: 'post',
          url: 'api/Common/CommonMethod/PostUploadImageList',
          data: {
            file,
          },
        }).then(res => {
          if (res[0] && res[0].url) {
            success(res[0].url)
          }
        }).catch(err => failure(err))
      }
    }
  },
  mounted () {
    if (this.defaultContent) {
      this.content = this.defaultContent
    }
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.content = ''
    }
  },
  watch: {
    content: {
      handler() {
        this.$emit('change', this.content)
      },
    },
    defaultContent: {
      handler() {
        this.content = this.defaultContent
      },
      immediate: true,//组件创建后，或者说watch被声明和绑定的时候，立刻执行一次handler函数
    },

  },
  activated() {
    this.tinymceFlag++
  },
}

</script>
<style scoped>

</style>
